<template>
    <div class="sub-paper">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索论文"
                placeholder="输入你感兴趣的论文"
                @search="search()" />
        <div class="chart-container">
            <h2 class="paper-title">- {{$route.params.name}} -</h2>
            <div class="mychart">
                <div class="left-foot" id="page-content"><Icon type="md-pulse" size="18" /> 关键词中心图谱</div>
                <div class="chart1"></div>
            </div>
        </div>
        <div class="sub-container">
            <div class="paper-content">

                <div class="content-left">
                    <div class="title">
                        <Icon type="md-apps" size="32" color="#999"></Icon>
                        <h3 style="margin-left:10px;font-size:18px">
                            期刊论文 
                            <span style="color:#888;font-weight:normal;margin-left:10px;font-size:15px;margin-right:5px"> > {{$route.params.name}}</span>
                            <span style="color:#888;font-weight:normal;font-size:15px" v-if="paper_name"> > {{paper_name}}</span>
                            <Select class="pc" v-model="year" style="width:120px;margin-left:20px" placeholder="筛选年份" @on-change="changeYear">
                                <Option v-for="item in yearList" :value="item" :key="item">{{ item }}</Option>
                            </Select>
                        </h3>
                        <div class="draw" @click="showDrawer()"><Icon type="md-exit" size="30" color="#bbb" class="drawer-icon" style="vertical-align:middle" /></div>
                    </div>
                    <div style="text-align:left;margin-top:10px" class="mobile">
                        <Select v-model="year" style="width:120px;" placeholder="筛选年份" @on-change="changeYear">
                            <Option v-for="item in yearList" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </div>
                    <Divider style="margin-top:15px;background-color:#ccc"  />
                    
                    <!-- 暂无结果 -->
                    <div v-if="!totalPages&&loaded" style="text-align:center" class="animated fadeInUp">
                        <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                        <br>
                        <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
                    </div>

                    <!-- 骨架屏 -->
                    <el-skeleton animated :loading="!loaded">
                        <template slot="template">
                        <div class="paper-list"  v-for="(item,index) in 7" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="width:150px;height:30px"  />
                                <el-skeleton-item variant="text" />
                                <el-skeleton-item variant="text" style="height:100px" />
                                <el-skeleton-item variant="text" />
                                <el-skeleton-item variant="text" />
                            </div>
                            <Divider style="margin-top:15px;background-color:#ccc"  />
                        </div>
                        </template>
                    </el-skeleton>
                    
                    <div v-if="!loading&&loaded">
                        <div class="paper-list" v-for="item in pageInfo" :key="item.id">
                            <div class="paper-title">
                                <Icon type="ios-paper" />
                                <span style="margin-left:5px" v-html="highlightHTML(item.paper_title||item.doc_title,searchKey)"></span>
                            </div>
                            <div class="paper-info">
                                <span><Icon type="md-contact" /> {{item.first_author||item.authors}}；</span>
                                <span v-if="item.other_authors"><span v-for="(other,index) in item.other_authors.split(/[;；,，]/)" :key="index" ><Icon type="md-contact" v-if="other&&other!='无'" /> {{(other&&other!="无")?`${other}；`:''}}</span></span>
                                <span><Icon type="md-stopwatch" /> {{item.publish_time||item.year_published}}</span>
                            </div>
                            <div class="paper-intro" v-html="highlightHTML(item.abstract,searchKey)"></div>
                            <div class="paper-keyword" v-if="item.keyword">
                                <span v-for="(keyword,index) in item.keyword.split(/[;；,，]/)" :key="index"><Button v-if="keyword.trim()" v-html="highlightHTML(keyword,searchKey)" @click="search(keyword)"></Button></span>
                            </div>
                            <div class="paper-conference"><Icon type="logo-buffer" /> {{item.journal_conference_name||item.publication_name}}  <span class="show-graph" @click="initGraph(item)"><Icon type="md-log-in" size="16" /> 图谱可视化</span></div>
                            <Divider style="margin-top:15px;background-color:#ccc"  />
                        </div>
                        <Page v-if="totalPages" :total="totalPages" class="pages" :current="pageNumber" :page-size="6" @on-change="getPageInfo" style="background:white" />
                    </div>
                </div>
                <div class="content-right" :class="show&&'animated fadeInRight'" @click="hiddenDrawer()" :style="show&&'visibility:visible'">
                    <div class="title">
                        <Icon type="md-apps" size="32" color="#999"></Icon>
                        <h3 style="margin-left:10px;font-size:18px">关键词及文献发表机构排名</h3>
                    </div>
                    <Divider style="margin-top:15px;background-color:#ccc"  />

                    <!-- 骨架屏 -->
                    <el-skeleton animated :loading="loading">
                        <template slot="template">
                        <div v-for="(item,index) in 5" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="width:30%;height:30px;"  />
                                <el-skeleton-item variant="text" style="width:68%;height:30px;margin-left:2%"  />
                                <el-skeleton-item variant="text" style="width:100%;height:30px"  />
                                <el-skeleton-item variant="text" style="width:100%;height:50px"  />
                                <el-skeleton-item variant="text" style="width:100%;height:30px"  />
                            </div>
                        </div>
                        </template>
                    </el-skeleton>

                    <div v-if="!loading">
                        <Badge v-for="(item,index) in defaultWords.slice(0,10)" :key="item.label" :text="index<=2?'hot':''">
                            <Button class="tag-btn" @click="search(item.name)">{{item.name}}</Button>
                        </Badge>
                        <div class="word-container">
                            <div class="word-title"><Icon type="md-medal" size="22" /> 论文热门关键词</div>
                            <wordcloud
                            class="wordcloud"
                            :data="defaultWords"
                            nameKey="name"
                            valueKey="value"
                            spiral="rectangular"
                            :color="myColors"
                            fontScale="n"
                            :drawOutOfBound="true"
                            :fontSize="[10,30]"
                            :showTooltip="false">
                            </wordcloud>
                        </div>
                        <chart-container title="文献发表机构排名">
                            <paper-chart-wxfbjgpm :ids="ids[$route.params.name]" />
                        </chart-container>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图谱框 -->
        <Modal
            v-model="showGraphModel"
            title="论文图谱可视化"
            >
            <div class="chart-graph"></div>
        </Modal>
    </div>
</template>
<script>
import utils from '../utils/utils'
import wordcloud from 'vue-wordcloud';
import search from '../components/topSearch.vue';
import PaperService from "@/service/papers";
import chartContainer from '../components/chartContainer.vue';
import paperChartWxfbjgpm from '../components/chart/paper/wxfbjgpm.vue';
export default {
    components: {
        wordcloud,
        search,
        'chart-container':chartContainer,
        'paper-chart-wxfbjgpm':paperChartWxfbjgpm
    },
    data(){
        return{
            searchKey:'',
            paper_name:'',
            showGraphModel:false,
            show:false,
            loading:true,
            loaded:false,
            totalPages:0,
            pageNumber:1,
            pageInfo:[],
            year:'',
            yearList:[],
            graph_chart:null,
            myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
            defaultWords: [{
                "name": "Cat",
                "value": 5
                },
                {
                "name": "fish",
                "value": 5
                },
                {
                "name": "things",
                "value": 5
                },
                {
                "name": "look",
                "value": 5
                },
                {
                "name": "智慧课题",
                "value": 2
                },
                {
                "name": "人工智能",
                "value": 1
                },
                {
                "name": "注意力",
                "value": 7
                },
                {
                "name": "人工智能",
                "value": 5
                },
                {
                "name": "雷达",
                "value": 5
                },
                {
                "name": "课堂注意力",
                "value": 5
                },
                {
                "name": "人工智能",
                "value": 9
                },
                {
                "name": "artificial inteligence",
                "value": 11
                },
                {
                "name": "人工智能",
                "value": 5
                },
                {
                "name": "AI",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 4
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 4
                },
                {
                "name": "电化教育",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 4
                },
                {
                "name": "电化教育",
                "value": 4
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育123",
                "value": 7
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育13",
                "value": 5
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育12",
                "value": 6
                },
                {
                "name": "电化教育11",
                "value": 6
                },
                {
                "name": "电化教育8",
                "value": 6
                },
                {
                "name": "电化教育7",
                "value": 6
                },
                {
                "name": "电化教育6",
                "value": 6
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "电化教育1",
                "value": 6
                },
                {
                "name": "电化教育2",
                "value": 6
                },
                {
                "name": "电化教育3",
                "value": 6
                },
                {
                "name": "电化教育",
                "value": 6
                },
                {
                "name": "fun",
                "value": 9
                }
            ],
            title_hot:[{
                title:'autism spectrum disorder',
                text:'new'
            },{
                title:'virtual environment',
                text:'new'
            },{
                title:'virtual character',
                text:'hot'
            },{
                title:'joint attention',
                text:''
            },{
                title:'Cloud-based',
                text:''
            },{
                title:'social communication'
            },{
                title:'technology-enhanced'
            },{
                title:'HCI'
            },{
                title:'个性化课程'
            },{
                title:'智能教室排课'
            },{
                title:'学业监控'
            },{
                title:'learning norms'
            },{
                title:'constant exercises'
            },{
                title:'学习路线'
            },{
                title:'教育机器人'
            },{
                title:'知识掌握测量'
            },{
                title:'teachers tracking'
            },{
                title:'师资匹配'
            },{
                title:'学习状态'
            },{
                title:'在线学习质量评测'
            },{
                title:'考试领域'
            },{
                title:'在线教学'
            },{
                title:'学生角色生成'
            }],
            //论文集-后端请求id映射
            ids: {
                'CSSCI期刊':'1062',
                'NSC教育类论文':'1070',
                'SSCI期刊论文':'1065',
                '信息科学与教育交叉研究论文':'1067',
                '社会学与教育交叉研究论文':'1068',
                '心理学与教育交叉研究论文':'1066',
                '脑科学与教育交叉论文':'1075',
                'EDM会议论文':'1076',
                'LAK会议论文':'1077',
                'ITS会议论文':'1078',
                'AIED会议论文':'1079'
            },
            types: {
                'CSSCI期刊':"PAPER_CSSCI",
                'SSCI期刊论文':"PAPER_SCI",
                'NSC教育类论文':"PAPER_NSC",
                '社会学与教育交叉研究论文':"PAPER_EDU_SOC",
                '心理学与教育交叉研究论文':"PAPER_PSY_EDU",
                '信息科学与教育交叉研究论文':"PAPER_IT_EDU",
                '脑科学与教育交叉论文':"PAPER_BRAIN_EDU",
                'EDM会议论文':"PAPER_CONF_EDM",
                'LAK会议论文':"PAPER_CONF_LAK",
                'ITS会议论文':"PAPER_CONF_ITS",
                'AIED会议论文':"PAPER_CONF_AIED"
            },
        }
    },
    computed:{
        filter_params(){
            let arr = [];
            const yearKey = this.$route.params.name=='SSCI期刊论文'?'year_published':'publish_time';
            const title = this.$route.params.name=='SSCI期刊论文'?'doc_title':'paper_title';
            if(this.year){
                arr.push([yearKey,0,this.year]);
            }
            if(this.searchKey){
                arr.push([title,6,this.searchKey])
            }
            return arr;
        }
    },
    methods:{
        showDrawer(){
            this.show = true;
            document.body.style.overflow = 'hidden';
        },
        hiddenDrawer(){
            this.show = false;
            document.body.style.overflow = 'scroll';
        },
        //获取数据函数
        getData(tag){
            this.loaded = false;

            if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
                document.body.scrollIntoView(true);
            }else{
                document.querySelector('#page-content').scrollIntoView(true);
            }

            //标签检索
            tag&&(this.searchKey = tag);
            tag&&(this.paper_name = tag);

            var options = {
                filter:this.filter_params,
                order:[["publish_time",1]],
                pageSize:6,
                pageNumber:this.pageNumber
            }
    
            PaperService.getDatas(options, this.ids[this.$route.params.name]).then((res) => {
                this.pageInfo = res.data;
                setTimeout(() => {
                this.loaded = true; 
                this.totalPages = res.total;
                this.loading = false;
                }, 500);
            });  
                
        },
        //分页函数
        getPageInfo(currentIndex){
            this.pageNumber = currentIndex;
            this.getData();
            document.querySelector('#page-content').scrollIntoView(true);
        },
        //加载关键词词云数据及关键词中心图谱
        loadKeywordData(){
            let option = {
                type: this.types[this.$route.params.name],
                topN: 100,
            };
            PaperService.getKeywords(option).then((res) => {
                this.defaultWords = res.data.map((item) => {
                //解决关键词统计含'无'的问题
                if(item[0] == '无') return{
                    name:'',
                    value:0
                };
                return {
                        name: item[0],
                        value: item[1],
                    };
                });

                //关键词中心图谱
                this.initKeywordGraph();
            });
        },
        //搜索
        search(tag){
            this.pageNumber = 1;
            this.paper_name = this.searchKey;
            console.log(this.paper_name,this.searchKey)
            this.getData(tag);
        },
        //搜索结果高亮
        highlightHTML(html,searchKey){
            return utils.highlightHTML(html,searchKey)
        },
        //关键词中心图谱可视化
        initKeywordGraph(){
            let chart1 = echarts.init(document.querySelector('.chart1'));
            chart1.showLoading({
                text:'正在加载数据...'
            });
            //获取论文节点
            PaperService.getDatas({pageSize:200}, this.ids[this.$route.params.name]).then((res) => {
                var paper200 = res.data;
                var hot_keywords = [];
                hot_keywords.push({
                    name:this.$route.params.name
                });
                //获取前10关键词
                for(let i=0;i<10;i++){
                    // console.log(this.defaultWords[i])
                    hot_keywords.push({
                        name:this.defaultWords[i].name
                    });
                }
                let option1 = {
                    tooltip: {
                        extraCssText:'max-width:420px; white-space:pre-wrap',
                        formatter: function(params) {
                            if(params.data.symbolSize == 50){
                                return `<div style="text-align:left">${params.marker}关键词:${params.data.text}<div>`;
                            }
                            else if(params.data.symbolSize == 10){
                                return `<div style="text-align:left">${params.marker}论文名:${params.data.text}<div>`;
                            }
                            
                        }
                    },
                    legend: [{
                        orient: 'vertical',
                        left:'20',
                        top:'center',
                        // type:'scroll',
                        textStyle:{
                            color:'#888',
                        },
                        data: hot_keywords.map(function(a) {
                            return a.name;
                        })
                    }],
                    series: [{
                        type: "graph",
                        layout: 'force',
                        roam: true,
                        center: [455.97, 259.71],
                        zoom:1.2,
                        force:{
                            friction:0,
                            edgeLength:50,
                            gravity:0.01,
                            repulsion:50
                        },
                        // hoverAnimation: true,
                        focusNodeAdjacency: true,
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        itemStyle: {
                            normal: {
                                borderColor: "#fff",
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: "rgba(0, 0, 0, 0.3)"
                            }
                        },
                        label:{
                            formatter: function(val) {
                                if(val.data.text.length>=100){
                                    return val.data.text.slice(0,20) + ".....";
                                }
                                if(val.data.text.length>=40){
                                    return val.data.text.slice(0,val.data.text.length/2) + "\n" + val.data.text.slice(val.data.text.length/2);
                                }
                                return val.data.text;
                            },
                        },
                        lineStyle: {
                            width:1,
                            curveness: 0.3,
                            opacity: 0.8
                        },
                        emphasis: {
                            itemStyle: {
                                borderWidth:1
                            },
                            lineStyle: {
                                color: 'gray',
                                width: 6,
                            }
                        },
                        data:[{
                            name:this.$route.params.name,
                            text:this.$route.params.name,
                            category:this.$route.params.name,
                            symbolSize:70,
                            label:{
                                show:true
                            }
                        }],
                        links:[],
                        categories: hot_keywords
                    }]
                };

                //关键词节点及边构建
                for(let i=1;i<hot_keywords.length;i++){
                    option1.series[0].data.push({
                        name:`keyword${i}`,
                        text:hot_keywords[i].name,
                        category:hot_keywords[i].name,
                        symbolSize:50,
                        label:{
                            show:true
                        },
                    });
                    option1.series[0].links.push({
                        source:this.$route.params.name,
                        target:`keyword${i}`
                    });
                }
                
                //论文节点及边构建
                for(let item of paper200){
                    if(!item.keyword) continue;
                    //选择有10个关键词之一的论文
                    for(let i=1;i<hot_keywords.length;i++){
                        if(item.abstract.toLowerCase().includes(hot_keywords[i].name.toLowerCase())){
                            option1.series[0].data.push({
                                name:item.id + '',
                                text:item.paper_title||item.doc_title,
                                category:this.$route.params.name,
                                symbolSize:15,
                            });
                            break;
                        }
                    }
                    //判断当前论文属于10个关键字中的几个
                    for(let i=1;i<hot_keywords.length;i++){
                        if(item.abstract.toLowerCase().includes(hot_keywords[i].name.toLowerCase())){
                            option1.series[0].links.push({
                                source:item.id + '',
                                target:`keyword${i}`
                            });
                        }
                    }
                }
                chart1.setOption(option1);
                chart1.hideLoading();

                window.onresize = () => {
                    chart1.resize();
                }
            });           
             
             
        },
        //论文图谱可视化
        initGraph(item){
            this.graph_chart = null;
            this.graph_chart = echarts.init(document.querySelector('.chart-graph'));
            this.graph_chart.showLoading({
                text:'正在加载...'
            });
            this.showGraphModel = true;
            let categories = [{
                    name: "论文名"
                }, {
                    name: "作者"
                }, {
                    name: "关键词"
                },{
                    name: "发表单位"
                },{
                    name: "时间"
                },{
                    name: "期刊"
                },{
                    name: "摘要"
            }];
            let graph = {
                tooltip: {
                    extraCssText:'max-width:420px; white-space:pre-wrap',
                    formatter: function(params) {
                        let overflow = '';
                        if(params.name.length>100) overflow = ' .....'; 
                        return `<div style="">${params.marker}${params.data.category}:${params.name.slice(0,200)}${overflow}<div>`;
                    }
                },
                animationDurationUpdate: 500,
                animationEasingUpdate: "quinticInOut",
                legend: [{
                    orient: 'vertical',
                    left:30,
                    top:'center',
                    textStyle:{
                        color:'#888',
                    },
                    data: categories.map(function(a) {
                        return a.name;
                    })
                }],
                series: [{
                    type: "graph",
                    layout: "force",
                    roam: true,
                    hoverAnimation: true,
                    focusNodeAdjacency: true,
                    symbolSize: 33,
                        force: {
                        repulsion:300
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#fff",
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: "rgba(0, 0, 0, 0.3)"
                        }
                    },
                    label:{
                        formatter: function(val) {
                            if(val.data.name.length>=100){
                                return val.data.name.slice(0,20) + ".....";
                            }
                            if(val.data.name.length>=40){
                                return val.data.name.slice(0,val.data.name.length/2) + "\n" + val.data.name.slice(val.data.name.length/2);
                            }
                            return val.data.name;
                        },
                    },
                    lineStyle: {
                        width:1,
                        curveness: 0.3,
                        opacity: 0.8
                    },
                    emphasis: {
                        itemStyle: {
                            borderWidth:1
                        },
                        lineStyle: {
                            color: 'gray',
                            width: 6,
                        }
                    },
                    data: [{
                        name: item.paper_title||item.doc_title,
                        category: '论文名',
                        symbolSize: 90,
                        label: {
                            show: true,
                        }, 
                        itemStyle: {
                            borderWidth:3
                        }, 
                        emphasis: {
                        itemStyle: {
                            borderWidth:3
                        },

                    },
                    }, {
                        name: "作者",
                        category: '作者', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "关键词",
                        category: '关键词', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "发表单位",
                        category: '发表单位', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "时间",
                        category: '时间', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "期刊",
                        category: '期刊', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "摘要",
                        category: '摘要', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.first_author_affiliation||item.publisher||'暂无数据',
                        category: '发表单位', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.publish_time||item.year_published||'暂无数据',
                        category: '时间', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.journal_conference_name||item.publication_name||'暂无数据',
                        category: '期刊', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.abstract,
                        category: '摘要', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    }],
                    links: [{
                        source: "作者",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "关键词",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "发表单位",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "时间",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "期刊",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "摘要",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: item.first_author_affiliation||item.publisher||'暂无数据',
                        target: "发表单位",
                        value: "",
                    },{
                        source: item.publish_time||item.year_published||'暂无数据',
                        target: "时间",
                        value: "",
                    },{
                        source: item.journal_conference_name||item.publication_name||'暂无数据',
                        target: "期刊",
                        value: "",
                    },{
                        source: item.abstract,
                        target: "摘要",
                        value: "",
                    }],
                    categories: categories
                }]
            };

            //push keyword
            if(item.keyword){
                for(let keyword of item.keyword.split(/[;；,，]/)){
                    if(!keyword) continue;
                    graph.series[0].data.push({
                        name: keyword,
                        category: '关键词', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    });
                    graph.series[0].links.push({
                        source: keyword,
                        target: "关键词",
                        value: "",
                    });
                }
            }

            //push 作者
            if(this.$route.params.name == 'SSCI期刊论文'){
                for(let author of item.authors.split(/[;；,，]/)){
                    if(!author) continue;
                    graph.series[0].data.push({
                        name: author,
                        category: '作者', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    });
                    graph.series[0].links.push({
                        source: author,
                        target: "作者",
                        value: "",
                    });
                }
            }else{
                graph.series[0].data.push({
                    name: item.first_author.replace(';',''),
                    category: '作者', 
                    symbolSize: 40,
                    label: {
                        show: true
                    }  
                });
                graph.series[0].links.push({
                    source: item.first_author.replace(';',''),
                    target: "作者",
                    value: "",
                });
                if(item.other_authors){
                    for(let author of item.other_authors.split(/[;；,，]/)){
                        if(!author) break;
                        graph.series[0].data.push({
                            name: author,
                            category: '作者', 
                            symbolSize: 40,
                            label: {
                                show: true
                            }  
                        });
                        graph.series[0].links.push({
                            source: author,
                            target: "作者",
                            value: "",
                        });
                    }
                }
                            
            }

            this.graph_chart.hideLoading();
            this.graph_chart.setOption(graph);

            window.addEventListener('resize',()=>{
                this.graph_chart.resize();
            })
        },
        //获取筛选年份数据
        getYears() {
            const yearKey = this.$route.params.name=='SSCI期刊论文'?'year_published':'publish_time';
            let option = {
                columns: [`distinct:${yearKey}`],
                pageSize: 0,
                order: [[yearKey, 1]],
                filter: [],
            };
            PaperService.getDatas(option, this.ids[this.$route.params.name]).then((res) => {
                this.yearList = res.data.map(item=>{
                    return item[`_distinct_${yearKey}`]
                });
            });
        },
        //切换年份数据
        changeYear(value){
            const yearKey = this.$route.params.name=='SSCI期刊论文'?'year_published':'publish_time';
            const title = this.$route.params.name=='SSCI期刊论文'?'doc_title':'paper_title';
            this.loaded = false; 
            PaperService.getDatas({
                filter:[[yearKey,0,value],[title,6,this.searchKey]]
            }, this.ids[this.$route.params.name]).then((res) => {
                this.pageInfo = res.data;
                setTimeout(() => {
                   this.loaded = true; 
                   this.totalPages = res.total;
                   this.loading = false;
                   this.pageNumber = 1; 
                }, 500);
            });
        }
    },
    mounted(){
        this.getData();
        this.loadKeywordData();
        this.$Loading.finish();
        this.getYears();
    }
}
</script>
<style lang="scss" scoped> 
.search-div{
    padding-bottom: 200px;
}
/deep/ .ivu-select-placeholder,
/deep/ .ivu-select-item,
/deep/ .ivu-select-selected-value{
    font-weight: normal;
}
/deep/ .ivu-modal{
    width: 60vw !important;
    top:50px;
    position: relative;
    overflow: hidden !important;
}
/deep/ .ivu-modal .chart-graph{
    height: 65vh;
    width: 80vw;
    padding-right: 30px;
}
.mobile{
    display: none;
}
.sub-paper{
    background: #eee;
    overflow: hidden;    
    >.chart-container{
        width: 76%;
        height: 550px;
        background: white;
        margin-top: -120px;
        margin-left: 12%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 50px;
        position: relative;
        box-shadow: 1px 1.732px 60px 0px rgba(0, 0, 0, 0.1);
        .paper-title{
            background: var(--single-color);
            box-shadow: 0 0 10px 0px #1b1b1b96;
            color: white;
            margin-top: 20px;
            font-weight: normal;
            font-size: 16px;
            margin: auto;
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            transform: translateY(-35px);
            top: 0;
            border-bottom: 5px solid #eee;
            display: inline-block;
            z-index: 999;
        }
        .mychart{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 0;
            .chart1{
                padding: 20px 50px;
                width: 76vw;
                height: 550px;
            }
            .left-foot{
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 15px 22px;
                background: var(--single-color);
                color: white;
                font-weight: bold;
                border-top-right-radius: 10px;
                border-bottom: 3px solid #eee;
                border-left: 3px solid #eee;
                box-shadow: 0 0 10px 0px #b6b6b6;
                z-index: 999;
            }
            /deep/ .ivu-carousel-dots-inside{
                display: none;
            }
        }
    }
    .sub-container{
        background: #fff;
        padding: 10px 7%;
        padding-top: 30px;
        .title {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 30px;
            text-overflow: ellipsis;
            .draw{
                position: absolute;
                right: 20px;
                display: none;
                span{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 15px;
                }
            }
        }
        .paper-content{
            display: flex;
            flex-direction: row;
            .content-left{
                width: 70%;
                .paper-list{
                    margin-bottom: 20px;
                    >div{
                        text-align: left;
                        color: #888;
                        margin-top: 5px;
                        margin-bottom: 5px;
                    }
                    .paper-title{
                        font-size: 20px;
                        font-weight: bold;
                        color: #4eadca;
                        cursor: pointer;
                    }
                    .paper-info{
                        color: #888;
                        font-weight: bold;
                    }
                    .paper-intro{
                        font-size: 13px;
                    }
                    .paper-keyword{
                        button{
                            padding: 5px;
                            font-size: 12px;
                            color: #999;
                            margin-right: 5px;
                            margin-top: 5px;
                        }
                    }
                    .paper-conference{
                        color: orange;
                        margin-top: 15px;
                        cursor: pointer;
                        .show-graph{
                            float:right;
                            vertical-align: bottom;
                            color:var(--single-color);
                            margin-right: 15px;
                            font-size: 14px;
                            margin-top: 3px;
                        }
                    }
                }
            }
            .content-right{
                width: 30%;
                margin-left: 20px;
                text-align: left;
                button{
                    margin-right: 10px;
                    font-size: 12px;
                    margin-top: 10px;
                }
                /deep/ .ivu-badge-count{
                    right:20px;
                    top: -2px;
                }
                .word-container{
                    position: relative;
                    border-radius: 5px;
                    background: white;
                    overflow: hidden;
                    // background: linear-gradient(-150deg,#24695f,#495a86);
                    // background-image: url(../assets/bg.jpg);
                    // background-size: 100% 100%;
                    min-width: 45%;
                    margin-top: 50px;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
                    z-index: 1;
                    .word-title{
                        background: var(--single-color);
                        color: white;
                        font-weight: bold;
                        padding: 15px 22px;
                        font-size: 16px;
                        text-align: left;
                    } 
                    }
                    .wordcloud{
                    background-size: 100% 100%;
                    /dee/ .chart{
                        width: 100%;
                    }
                    /deep/ text{
                        cursor: pointer !important;
                        transition: text-shadow 0.2s ease;
                    }
                    /deep/ text:hover{
                        font-size: 20px;
                        text-shadow: 0 1px 1px rgba(59, 59, 59, 0.767);
                    }
                }
            }
            
        }
    }
}

@media (max-width:1060px) {
.search-div{
    padding-bottom: 80px;
}
.pc{
    display: none;
}
.mobile{
    display: block;
}
.sub-paper{
    .show-graph{
        display: none;
    }
    >.chart-container{
        width: 100%;
        margin-left: 0%;
        height: 450px;
        margin-bottom: 10px;
        display: none;
        .mychart{
            .chart1{
                width: 100vw;
                padding: 35px 30px;
                height: 400px;
            }   
        }
    }
    .draw{
        display: block !important;
    }
    .sub-container{
    .paper-content{
        .content-right{
            // display: none;
            visibility: hidden;
            position: fixed;
            z-index: 999;
            top: 0;
            width: 100%;
            background: white;
            right: 0;
            padding: 20px;
            height: 100vh;
            overflow-x: scroll;
        }
        .content-left{
            width: 100%;
        }
    }
    }
}
}
</style>